<template>
	<div class="fd-bottom">
		<div class="bottom" >
			<ul class="ul-one" v-show='BottomType==1'>
				<li @click='tab(item,index)'
				:class="{active: activeName == index}"
				v-for="(item,index) in bottomList">
					<span class="iconfont iconSpan" :class='item.iconClass'></span>
					<span class="textSpan">{{item.gameNames}}</span>
				</li>
			</ul>
			<ul class="ul-two" v-show='BottomType==2'>
				<li @click='tab(item,index)'
				v-for='(item,index) in bottomList'
				:class="{active: activeName == index}"
				>
					<span class="iconfont iconSpan" :class='item.iconClass'></span>
					<span class="textSpan">{{item.gameNames}}</span>
				</li>
			</ul>
			<ul class="ul-three" v-show='BottomType==3'>
				<li @click='tab(item,index)'
				v-for='(item,index) in bottomList'
				:class="{active: activeName == index}"
				>
					<span class="iconfont iconSpan" :class='item.iconClass'></span>
					<span class="textSpan">{{item.gameNames}}</span>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'bottom',
		props:{
			bottomList:{
				type: Array,
        		default: []
			},
			BottomType:{
				type: String,
				default:'1'
			}
		},
		data() {
			return{
				activeName:''	//点击时的状态
			}
		  },
		  mounted() {
		  	
		  },
		  methods: {
		  	
		    tab: function(item,index) {
		      	this.activeName = index;
		      	this.$emit('buttomClick',index)
		    }
		  }
	}
</script>
<style scoped>
	@import "../../static/css/myIcon/iconfont.css"
	/*.fd-bottom{
		.bottom{
			position: absolute;
			bottom: 0;
			height: 49px;
			width: 100%;
			background: white;
			z-index: 999;
			.ul-one{
				display: flex;
				height: 49px;
				li{
					flex: 1;
					text-align: center;
					color: #A2A9B0;
					display: flex;
					flex-direction: column;
					&.active{
					  	color:#2CA9FF;
					}
					.iconSpan{
						font-size: 24px;
					}
					.textSpan{
						font-size: 10px;
						line-height: 10px;
					}
				}
			}
			.ul-two{
				display: flex;
				height: 49px;
				li{
					flex: 1;
					text-align: center;
					line-height: 49px;
					color: #656B6F;
					&.active{
					  	color:#2CA9FF;
					}
					.iconSpan{
						font-size: 24px;
					}
					.textSpan{
						font-size: 15px;
						line-height: 49px;
					}
				}
			}
			.ul-three{
				display: flex;
				height: 49px;
				li{
					flex: 1;
					text-align: center;
					line-height: 49px;
					color: #656B6F;
					&.active{
					  	color:white;
					  	background: #2CA9FF;
					}
				}
			}
		}
	}*/
/*.fd-bottom .bottom{
	position: absolute;
	bottom: 0;
	height: 49px;
	width: 100%;
	background: white;
	z-index: 999;
}
.fd-bottom .bottom ul{
	display: flex;
}
.fd-bottom .bottom .ul-one li{
	flex: 1;
	text-align: center;
	color: #A2A9B0;
	display: flex;
	flex-direction: column;
}
.fd-bottom .bottom .ul-one li.active{
	color:#2CA9FF;
}
.fd-bottom .bottom .ul-one .iconSpan{
	font-size: 24px;
}
.fd-bottom .bottom .ul-one .textSpan{
	font-size: 10px;
	line-height: 10px;
}
.fd-bottom .bottom .ul-two li{
	flex: 1;
	text-align: center;
	line-height: 49px;
	color: #656B6F;
}	
.fd-bottom .bottom .ul-two li.active{
	color:#2CA9FF;
}
.fd-bottom .bottom .ul-two .iconSpan{
	font-size: 24px;
}
.fd-bottom .bottom .ul-two .textSpan{
	font-size: 15px;
	line-height: 49px;
}
.fd-bottom .bottom .ul-three li {
	flex: 1;
	text-align: center;
	line-height: 49px;
	color: #656B6F;
}	
.fd-bottom .bottom .ul-three li.active{
	color:white;
  	background: #2CA9FF;
}*/

	

</style>